<template>
	<view class="owner-info-page">
		<!-- 自定义头部 -->
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-container" @click="closePage()">
					<view class="back-btn">
						<text class="cuIcon-back"></text>
					</view>
					<view class="page-title">
						认证信息
					</view>
				</view>
			</template>
		</headerSlotVue>

		<!-- 主要内容区域 -->
		<view class="content-container">
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-container">
				<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
			</view>

			<!-- 认证信息内容 -->
			<view v-else class="info-content">
				<!-- 基础信息卡片 -->
				<view class="info-card">
					<view class="card-header">
						<view class="header-icon">
							<text class="cuIcon-profile"></text>
						</view>
						<text class="header-title">基础信息</text>
					</view>

					<view class="info-list">
						<view class="info-item">
							<view class="info-label">
								<text class="label-icon">👤</text>
								<text class="label-text">真实姓名</text>
							</view>
							<view class="info-value">{{info.realName || '未填写'}}</view>
						</view>

						<view class="info-item">
							<view class="info-label">
								<text class="label-icon">📞</text>
								<text class="label-text">联系电话</text>
							</view>
							<view class="info-value">{{formatPhone(userInfo.phone) || '未填写'}}</view>
						</view>

						<view class="info-item">
							<view class="info-label">
								<text class="label-icon">📍</text>
								<text class="label-text">地址</text>
							</view>
							<view class="info-value">{{formatAddress() || '未填写'}}</view>
						</view>
					</view>
				</view>

				<!-- 身份证照卡片 -->
				<view class="info-card">
					<view class="card-header">
						<view class="header-icon">
							<text class="cuIcon-card"></text>
						</view>
						<text class="header-title">身份证照</text>
					</view>

					<view class="image-section">
						<view v-if="info.idCardImage && info.idCardImage.length > 0" class="image-grid">
							<view class="image-item" v-for="(item, index) in info.idCardImage" :key="index"
								@click="previewImage(item, info.idCardImage)">
								<image :src="item" mode="aspectFill"></image>
								<view class="image-overlay">
									<text class="cuIcon-search"></text>
								</view>
							</view>
						</view>
						<view v-else class="empty-images">
							<text class="cuIcon-card"></text>
							<text class="empty-text">暂无身份证照</text>
						</view>
					</view>
				</view>

				<!-- 业主凭证卡片 -->
				<view class="info-card">
					<view class="card-header">
						<view class="header-icon">
							<text class="cuIcon-form"></text>
						</view>
						<text class="header-title">业主凭证</text>
					</view>

					<view class="image-section">
						<view v-if="info.images && info.images.length > 0" class="image-grid">
							<view class="image-item" v-for="(item, index) in info.images" :key="index"
								@click="previewImage(item, info.images)">
								<image :src="item" mode="aspectFill"></image>
								<view class="image-overlay">
									<text class="cuIcon-search"></text>
								</view>
							</view>
						</view>
						<view v-else class="empty-images">
							<text class="cuIcon-form"></text>
							<text class="empty-text">暂无业主凭证</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<button class="edit-btn" @click="toPage('/pages/mePages/certifiedOwners')">
				<text class="btn-icon">✏️</text>
				<text class="btn-text">修改认证信息</text>
			</button>
		</view>
	</view>
</template>

<script>
	import headerSlotVue from '@/components/header-slot.vue';
	import storage from '@/utils/storage';
	import {
		getCertificationInfo
	} from "@/api/mine.js"

	export default {
		components: {
			headerSlotVue,
		},
		data() {
			return {
				loading: false,
				info: {},
				userInfo: {},
				loadingText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			this.userInfo = storage.getUserInfo()
			this.init()
		},
		methods: {
			async init() {
				try {
					this.loading = true
					const res = await getCertificationInfo()
					this.info = res.data.data.latestAuth || {}
				} catch (error) {
					console.error('获取认证信息失败:', error)
					uni.showToast({
						title: '获取认证信息失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			closePage() {
				uni.navigateBack()
			},

			previewImage(currentUrl, urls) {
				if (!urls || urls.length === 0) return

				uni.previewImage({
					current: currentUrl,
					urls: urls
				});
			},

			toPage(route) {
				uni.setStorageSync('formData', this.info)
				this.$router.smartNavigate({
					url: route
				})
			},

			formatPhone(phone) {
				if (!phone) return ''
				// 手机号脱敏处理
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
			},

			formatAddress() {
				if (!this.info.community || !this.info.community.name) return ''
				const community = this.info.community.name || this.info.communityName || ''
				const houseInfo = this.info.houseInfo || ''
				return community + houseInfo
			}
		}
	}
</script>

<style lang="scss" scoped>
	.owner-info-page {
		min-height: 100vh;
		background: #f5f7fa;
	}

	.header-container {
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		width: 100%;
		height: 88rpx;

		.back-btn {
			margin-right: 20rpx;
			padding: 8rpx;

			.cuIcon-back {
				font-size: 36rpx;
				color: #2C2622;
			}
		}

		.page-title {
			font-weight: 600;
			font-size: 36rpx;
			color: #2C2622;
		}
	}

	.content-container {
		padding: 32rpx;
		padding-bottom: 120rpx;
	}

	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}

	.info-content {
		.info-card {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 32rpx 24rpx;
			margin-bottom: 32rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

			.card-header {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;

				.header-icon {
					width: 48rpx;
					height: 48rpx;
					background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 16rpx;

					text {
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}

				.header-title {
					font-size: 32rpx;
					color: #2C2622;
					font-weight: 600;
				}
			}

			.info-list {
				.info-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #f5f5f5;

					&:last-child {
						border-bottom: none;
					}

					.info-label {
						display: flex;
						align-items: center;

						.label-icon {
							font-size: 28rpx;
							margin-right: 12rpx;
						}

						.label-text {
							font-size: 28rpx;
							color: #606266;
							font-weight: 500;
						}
					}

					.info-value {
						font-size: 28rpx;
						color: #2C2622;
						font-weight: 500;
						max-width: 60%;
						text-align: right;
						word-break: break-all;
					}
				}
			}

			.image-section {
				.image-grid {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 16rpx;

					.image-item {
						position: relative;
						width: 100%;
						height: 200rpx;
						border-radius: 12rpx;
						overflow: hidden;
						background: #f8f9fa;

						image {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}

						.image-overlay {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: rgba(0, 0, 0, 0.3);
							display: flex;
							align-items: center;
							justify-content: center;
							opacity: 0;
							transition: opacity 0.2s;

							text {
								font-size: 32rpx;
								color: #FFFFFF;
							}
						}

						&:active .image-overlay {
							opacity: 1;
						}
					}
				}

				.empty-images {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 200rpx;
					background: #f8f9fa;
					border-radius: 12rpx;
					border: 2rpx dashed #d1d5db;

					text {
						font-size: 48rpx;
						color: #c0c4cc;
						margin-bottom: 16rpx;

						&.empty-text {
							font-size: 28rpx;
							color: #909399;
						}
					}
				}
			}
		}
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 32rpx;
		background: #FFFFFF;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);

		.edit-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 88rpx;
			background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
			color: #FFFFFF;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-weight: 600;
			border: none;
			transition: all 0.2s;

			&:active {
				transform: scale(0.98);
			}

			.btn-icon {
				font-size: 28rpx;
				margin-right: 12rpx;
			}

			.btn-text {
				font-size: 32rpx;
			}
		}
	}
</style>